import React, { Component } from 'react';
import { getBookinfos, getRelated } from '@/utils/api.js';
import Wechart from '@/components/wechart';
import './index.scss';
class Com extends Component {
  constructor (props) {
    super(props);
    this.state = {
      // bookid:this.props.match.params._id,
      // bookid:'245012',
      bookid:'240071',
      bookinfos: {},
      comments: [],
      related: []
    }
  }
  componentDidMount () {
    getBookinfos(this.state.bookid).then(res => {
      console.log(res.data.data);
      this.setState({
        bookinfos: res.data.data[0]
      })
      console.log(444444444)
      console.log(this.state.bookinfos.cat)
    }).then(() => {
      getRelated(this.state.bookinfos.cat).then(res => {
        console.log(1111111111111)
        console.log(res.data.data)
        this.setState({
          related: res.data.data
        })
      })
    })
  }
  render () {
    return(
      <div className="container1">
        <Wechart flag={true} />
        <div className="box">
          <header className="header">
            <div className="back" onClick={
              () => {
                this.props.history.goBack();
              }
            }>
              <span>&lt;&ensp;返回</span>
            </div>
            <p>书籍详情</p>
            <div className="rackHome">
              <span className="iconfont icon-icon_shujianor" onClick={
                () => {
                  this.props.history.push('/bookrack');
                }
              }></span>
              <span className="iconfont icon-shouye" onClick={
                () => {
                  this.props.history.push('/home');
                }
              }></span>
            </div>
          </header>
          <div className="content">
            <div className="bookinfo">
                <div className="img">
                  <img src={ this.state.bookinfos.cover } alt="#"/>
                </div>
                <div className="bookinfor">
                  <div className="h1">{ this.state.bookinfos.title }</div>
                  <div className="h2"><span className="author">{ this.state.bookinfos.author }</span>&nbsp;&nbsp;|&nbsp;&nbsp;<span>{ this.state.bookinfos.cat }</span>&nbsp;&nbsp;|&nbsp;&nbsp;<span>{ this.state.bookinfos.wordCount > 10000 ? Math.floor(this.state.bookinfos.wordCount / 10000) + "万字" : this.state.bookinfos.wordCount + "个字" }</span></div>
                  <div className="h3">{ this.state.bookinfos.zt }</div>
                </div>
              </div>
            <div className="action">
              <div className="addBookrack" >加入书架</div>
              <div className="beginRead" >开始阅读</div>
            </div>
            <div className="bookWorth">
              <div className="worth pop">
                <h2>追人气</h2>
                <p>1286</p>
              </div>
              <div className="worth ratio">
                <h2>读者留存率</h2>
                <p><span>{ this.state.bookinfos.retentionRatio }</span>%</p>
              </div>
              <div className="worth wordUpdate">
                <h2>日更字数/天</h2>
                <p>{ this.state.bookinfos.followerCount }</p>
              </div>
            </div>
            <div className="abstract">
              <div className="absWords">
                { this.state.bookinfos.longIntro }
              </div>
            </div>
            <div className="catelog">
              <h3>目录</h3>
              <p>[&nbsp;<span>{ this.state.bookinfos.zt }</span>&nbsp;] 正文卷 <span>{ this.state.bookinfos.lastChapter }</span>&nbsp;&gt;</p>
            </div>
            <div className="hotComment">
              <h3>热门书评</h3>
              <div className="commentList">
                <div className="commentItem">
                  暂无评论~
                </div>
              </div>
            </div>
            <div className="interests">
              <div className="related">
                <div className="relHeader">
                  <div className="head4">你可能感兴趣</div>
                  <div className="head5">更多</div>
                </div>
                <div className="relatedList">
                  {
                    this.state.related.map(
                      (item) => {
                        return (
                          <div className="relatedItem" key={item._id}>
                            <div className="img">
                              <img src={ item.cover } alt="#"/>
                            </div>
                            <div className="title">{item.title}</div>
                          </div>
                        )
                      }
                    )
                  }
                </div>
              </div>
            </div>
            <div className="copyRight">
              <div className="head1">版权信息</div>
              <div className="p1">经典书殿</div>
            </div>
          </div>
        </div>
        <footer className="footer1">
        </footer>
        <Wechart />
      </div>
    )
  }
}
export default Com;